<template>
  <div>
    <!-- immediate-check初始化是否检查数据加载完毕   -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="别拉啦，到底线了"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-cell
        v-for="data in datalist"
        :key="data.filmId"
        @click="handleClick(data.filmId)"
      >
        <img :src="data.poster" alt="" />
        <div class="titel">{{ data.name }}</div>
        <div class="content">
          <div :class="data.grade ? '' : 'hidden'">
            观众评分：<span style="color: orange">{{ data.grade }} </span>
          </div>
          <div class="acotrs">主演：{{ data.actors | actorsFilter }}</div>
          <div class>{{ data.nation }} | {{ data.runtime }} 分钟</div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import http from "@/util/http";
import Vue from "vue";

Vue.filter("actorsFilter", (data) => {
  // console.log(data.map(item => item.name).join());
  return data.map((item) => item.name).join(" ");
});
export default {
  data() {
    return {
      datalist: [],
      loading: false,
      finished: false,
      current :1,
      total:0
    };
  },

  mounted() {
    http({
      url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=1&pageSize=10&type=1&k=7388950`,
      headers: {
        "X-Host": "mall.film-ticket.film.list",
      },
    }).then((res) => {
      this.datalist = res.data.data.films;
      this.total = res.data.data.total
    });
  },

  methods: {
    /* 总长度匹配 */
    onLoad() {
      if (this.datalist.length === this.total && this.total!=0) {
        this.finished = true
        return
      }


      console.log("到底了");
      this.current++
      http({
        url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.current}&pageSize=10&type=1&k=7388950`,
        headers: {
          "X-Host": "mall.film-ticket.film.list",
        },
      }).then((res) => {
        this.datalist = [...this.datalist,...res.data.data.films]

        /* 记得让loding设置成false */
        this.loading = false
      });
    },
    handleClick(id) {
      // console.log(id);
      /* 编程序导航 */
      // location.href = '#/detail'

      /*1。vue的编程序导航 通过路径跳转 */
      // this.$router.push(`/detail/${id}`)

      /*2. 通过命名路由跳转  */
      this.$router.push({
        name: "bee",
        params: {
          id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.van-list {
  .van-cell {
    overflow: hidden;
    padding: 0.8333rem;
    img {
      width: 4.4444rem;
      float: left;
    }
    .title {
      font-size: 1.1111rem;
    }
    .content {
      font-size: 0.7222rem;
      color: gray;
      .acotrs {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.hidden {
  visibility: hidden;
  height: 0.5556rem;
}
</style>
